<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作内联样式</title>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color: red;
            overflow: auto;
        }
    </style>
    <script>
     window.onload=function(){
         /*
         点击按钮后修改box1的大小
          */
         var box1=document.getElementById("box1");
         var btn1=document.getElementById("btn1");
         var btn2=document.getElementById("btn2");
         btn1.onclick=function (){
             /*
             通过JS修改元素的样式
             语法： 元素.style.样式名=样式值
             如果CSS的样式名中有-号 eg：background-color  在JS中是不合法的
             需要将这种样式名修改为驼峰命名法

             通过style属性设置的样式都是内联样式
             而内联样式有较高优先级，往往会立即显示
              如果在样式中写了 ！important，则此样式会有最高的优先级，js无法修改
              */
             box1.style.width="300px";
             box1.style.height="300px";
             box1.style.backgroundColor="blue";
             /*
             获取元素的当前显示样式
             语法：getComputed(元素名).样式名
             可以用来读取当前元素正在显示的样式
             第一个参数：要获取样式的元素
             第二个参数：可以传递一个伪元素，一般都传null
             该方法会返回一个对象，对象中封装了当前元素的对应的样式
             可以根据对象，样式名来读取样式
             如果获取样式没有设置，则会获取真实的值，而不是默认值
              */
             alert(getComputedStyle(box1,null).width);
         }
         //读取样式（内联样式）
         //语法： 元素.style.样式名
         btn2.onclick=function (){
             alert(box1.style.width);
         }
     }
     /*
              其他样式属性：
       clientWidth
       clientHeight
        -这两个属性可以获取元素的可见宽度和高度
        -这些属性都是返回一个数字，可以直接进行计算
        -会获取元素的高度和宽度，包括内容区和内边距

        offsetWidth
        offsetHeight
        -获取元素的整个宽度和高度，包括内容区和边框
        offsetParent
        -可以用来获取当前元素的定位父元素
          会获取离当前元素最近的开启了定位的元素
          如果没有，则返回body
        offsetLeft
        -当前元素相对于其定位父元素的水平偏移量
        offsetTop
        -当前元素相对于其定位父元素的垂直偏移量
        scrollWidth
        scrollHeight
        -可以获取元素实际的高度和宽度
        scrollLeft
        scrollTop
        -获取当前元素水平/垂直滚动的距离
        **当scrollHeight-scrollTop==clientHeight时
          说明垂直滚动条滚动到底了
      */
    </script>
</head>
<body>
<button id="btn1">点我一下</button>
<button id="btn2">点我一下</button>
<br/>
<div id="box1"></div>
</body>
</html>